<script>
import {
  cancelComplaint,
  editComplaint,
  getComplaintDetail,
  getComplaintList
} from '@/api/mallApi/advert'
import Template from '@/framework/views/messageCenter/template/index.vue'
import { cloud } from '@/framework/utils/request'

export default {
  name: 'ComplaintRecord',
  components: { Template },
  data() {
    return {
      uploadFileUrl: `${this.baseURL()}/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      isEdit: true,
      isLoading: false,
      page: 1,
      size: 10,
      total: 0,
      tableData: [],
      memberId: '',
      // 弹窗数据
      dialogData: {},
      dialogVisible: false,
      dialogRules: {
        complaintTheme: [
          { required: true, message: '请选择投诉主题', trigger: 'change' }
        ],
        complaintData: [
          { required: true, message: '请输入投诉内容', trigger: 'change' }
        ],
        img: [{ required: true, message: '请上传投诉图片', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getTableData()
    // 从store 中获取用户信息
    const { user } = this.$store.state
  },
  methods: {
    getTableData() {
      this.isLoading = true
      this.memberId = this.$store.state.user.userId
      const params = {
        pageSize: this.size,
        pageNo: this.page,
        memberId: this.memberId
      }
      getComplaintList(params)
        .then((res) => {
          if (res.code === '00000') {
            this.tableData = res.data.rows
            this.total = res.data.totalRows
            this.isLoading = false
          }
        })
        .catch((err) => {
          this.$message.error(err)
          this.isLoading = false
        })
    },
    changePage(val) {
      this.page = val
      this.getTableData()
    },
    changeSize(val) {
      this.size = val
      this.getTableData()
    },
    getDialogData(val) {
      getComplaintDetail({ id: val })
        .then((res) => {
          if (res.code === '00000') {
            this.dialogData = res.data
            console.log(res.data, 'res.data')
            this.dialogData.orderMoney = (res.data.orderMoney / 100).toFixed(2)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleCancel(row) {
      this.$confirm('是否取消投诉？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button el-button--danger',
        cancelButtonClass: 'el-button'
      })
        .then(() => {
          // 取消投诉
          cancelComplaint({ id: row.id })
            .then((res) => {
              if (res.code === '00000') {
                this.$message({
                  type: 'success',
                  message: '取消成功'
                })
                this.getTableData()
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleView(row) {
      this.getDialogData(row.id)
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.getDialogData(row.id)
      this.dialogVisible = true
      this.isEdit = false
    },
    handleClose() {
      this.dialogVisible = false
      this.isEdit = true
      // 表单重置
      this.$refs.dialogForm.resetFields()
      this.dialogData = {}
    },

    handleSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (!valid) return this.$message.error('请填写完整信息')
        const params = {
          id: this.dialogData.id,
          mallCode: this.dialogData.mallCode,
          orderCode: this.dialogData.orderCode,
          orderTime: this.dialogData.orderTime,
          orderMoney: this.dialogData.orderMoney * 100,
          complaintTheme: this.dialogData.complaintTheme,
          complaintData: this.dialogData.complaintData,
          img: this.dialogData.img
        }
        editComplaint(params)
          .then((res) => {
            if (res.code === '00000') {
              this.$message.success('修改成功')
              this.getTableData()
              this.dialogVisible = false
              this.isEdit = true
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      })
    },
    baseURL() {
      return process.env.VUE_APP_BASE_API + cloud.file
    },
    handleRemove() {
      this.dialogData.img = ''
    },
    handleAvatarSuccess(res, file, fileList) {
      this.dialogData.img = file.response.data.fileUrl
    },
    handleExceed(files, fileList) {
      this.$message.warning('当前限制选择 1 张图片，请先删除再上传')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
    }
  }
}
</script>

<template>
  <div class="complaintRecord">
    <div class="title">
      <p>投诉管理</p>
    </div>
    <!-- /.title -->
    <div class="complaint-list" style="padding: 0 20px; margin-top: 30px">
      <div class="table">
        <div v-if="!tableData.length && !isLoading">
          <img alt="" src="./images/缺省页.png" style="margin-left: 300px" />
          <p style="margin-left: 400px; font-size: 14px; color: #626262">
            暂时没有搜索到您要找的内容！
          </p>
        </div>
        <el-table
          v-else
          v-loading="isLoading"
          :data="tableData"
          :row-style="{ height: '38.5px' }"
          border
          stripe
          style="width: 100%; height: 829px"
        >
          <el-table-column label="#" width="40" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <!-- 投诉人 -->
          <el-table-column
            prop="nickName"
            label="投诉人"
            width="100"
            align="center"
          >
          </el-table-column>
          <!-- 订单编号 -->
          <!-- <el-table-column prop="orderCode" label="订单编号" width="200"> -->
          <!-- </el-table-column> -->
          <!-- 投诉主题 -->
          <el-table-column
            prop="complaintTheme"
            label="投诉主题"
            width="100"
            align="center"
          >
          </el-table-column>
          <!-- 投诉状态 -->
          <el-table-column
            prop="status"
            label="投诉状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 1 待受理 2 受理中 3 已处理 4 已取消 -->
              <el-tag
                v-if="scope.row.status === 1"
                type="warning"
                effect="dark"
                size="mini"
              >待受理
              </el-tag>
              <el-tag
                v-else-if="scope.row.status === 2"
                type="success"
                effect="dark"
                size="mini"
              >受理中
              </el-tag>
              <el-tag
                v-else-if="scope.row.status === 3"
                type="success"
                effect="dark"
                size="mini"
              >已处理
              </el-tag>
              <el-tag
                v-else-if="scope.row.status === 4"
                type="danger"
                effect="dark"
                size="mini"
              >已取消
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintData"
            label="描述"
            align="center"
          ></el-table-column>
          <!-- 投诉时间 -->
          <el-table-column
            prop="orderTime"
            label="投诉时间"
            width="180"
            align="center"
          >
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button class="btn" size="mini" @click="handleView(scope.row)"
              >查看
              </el-button>
              <!-- 取消 -->
              <el-button
                class="btn"
                size="mini"
                type="danger"
                v-show="scope.row.status !== 4"
                @click="handleCancel(scope.row)"
              >
                取消
              </el-button>
              <el-button
                v-show="scope.row.status === 1"
                class="btn"
                size="mini"
                type="danger"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row justify="end" type="flex">
          <el-pagination
            :current-page.sync="page"
            :page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            :total="total"
            background
            layout="prev, pager, next, sizes"
            style="margin-top: 20px"
            @current-change="changePage"
            @size-change="changeSize"
          >
          </el-pagination>
        </el-row>
        <div v-if="!tableData && !isLoading">
          <img alt="" src="./images/缺省页.png" style="margin-left: 300px" />
          <p style="margin-left: 400px; font-size: 14px; color: #626262">
            暂时没有搜索到您要找的内容！
          </p>
        </div>
      </div>
    </div>
    <div class="dialog">
      <el-dialog title="投诉详情" :visible.sync="dialogVisible" width="54%">
        <el-form
          :model="dialogData"
          ref="dialogForm"
          label-width="150px"
          inline
          :rules="dialogRules"
        >
          <el-form-item label="投诉人">
            <el-input
              v-model="dialogData.nickName"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input
              v-model="dialogData.orderCode"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <!-- 订单金额 -->
          <el-form-item label="订单金额">
            <el-input
              v-model="dialogData.orderMoney"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="投诉主题" prop="complaintTheme">
            <el-select
              style="width: 300px"
              v-model="dialogData.complaintTheme"
              placeholder="请选择投诉主题"
              :disabled="isEdit"
            >
              <el-option label="商品质量" value="商品质量"></el-option>
              <el-option label="服务态度" value="服务态度"></el-option>
              <el-option label="物流问题" value="物流问题"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投诉内容" prop="complaintData">
            <el-input
              v-model="dialogData.complaintData"
              :disabled="isEdit"
              style="width: 300px"
              placeholder="请输入投诉内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="投诉时间">
            <el-input
              v-model="dialogData.orderTime"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="投诉图片" prop="img">
            <el-upload
              v-model="dialogData.img"
              :action="uploadFileUrl"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-exceed="handleExceed"
              style="margin-right: 150px; width: 150px; height: 150px"
              :show-file-list="false"
            >
              <img
                v-if="dialogData.img"
                :src="dialogData.img"
                class="avatar"
                alt=""
                style="width: 150px; height: 150px"
              />
              <!--              <el-image-->
              <!--                v-if="dialogData.img"-->
              <!--                :src="dialogData.img"-->
              <!--                :preview-src-list="[dialogData.img]"-->
              <!--              ></el-image>-->
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="处理时间" v-show="dialogData.handleTime">
            <el-input
              v-model="dialogData.handleTime"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="处理人" v-show="dialogData.handlePersonName">
            <el-input
              v-model="dialogData.handlePersonName"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="处理备注" v-show="dialogData.handleOpinion">
            <el-input
              type="textarea"
              v-model="dialogData.handleOpinion"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <!--受理-->
          <el-form-item label="受理人" v-show="dialogData.acceptPerson">
            <el-input
              v-model="dialogData.acceptPerson"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="受理时间" v-show="dialogData.acceptTime">
            <el-input
              v-model="dialogData.acceptTime"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <!--受理备注-->
          <el-form-item label="受理备注" v-show="dialogData.acceptOpinion">
            <el-input
              type="textarea"
              v-model="dialogData.acceptOpinion"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="回复人" v-show="dialogData.replyPersonName">
            <el-input
              v-model="dialogData.replyPersonName"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="回复时间" v-show="dialogData.replyTime">
            <el-input
              v-model="dialogData.replyTime"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="回复内容" v-show="dialogData.replyOpinion">
            <el-input
              type="textarea"
              v-model="dialogData.replyOpinion"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-tag
              v-if="dialogData.status === 1"
              type="warning"
              effect="dark"
              size="mini"
            >待受理
            </el-tag>
            <el-tag
              v-else-if="dialogData.status === 2"
              type="success"
              effect="dark"
              size="mini"
            >受理中
            </el-tag>
            <el-tag
              v-else-if="dialogData.status === 3"
              type="success"
              effect="dark"
              size="mini"
            >已处理
            </el-tag>
            <el-tag
              v-else-if="dialogData.status === 4"
              type="danger"
              effect="dark"
              size="mini"
            >已取消
            </el-tag>
          </el-form-item>
          <!-- 关闭取消 -->
          <el-row type="flex" justify="center">
            <el-form-item>
              <el-button type="primary" @click="handleClose">关闭</el-button>
              <el-button v-show="!isEdit" type="primary" @click="handleSubmit"
              >提交
              </el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
    <!-- /.dialog -->
  </div>
  <!-- /.complaintRecord -->
</template>

<style scoped lang="scss">
.complaintRecord {
  background: #fff;
  height: 1041px;

  .title {
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    border-bottom: 1px solid #e5e5e5;

    p {
      height: 62px;
      line-height: 62px;
      padding-left: 20px;
    }
  }
}
</style>
